<template>
	<p>搜索后的数据</p>
	<div style="width: 100%;height: 0.1rem;background-color:#E1337F ;"/>
	&emsp;
  <el-container>
      <el-aside width="25%" >
		  <div class="nav-container">
		    <!-- 左侧导航栏 -->
		    <el-menu
		      class="left-nav"
		      mode="vertical"
		      @mouseenter="menuMouse()"
		      @mouseleave="menu()"
		    >
			<el-menu-item style="color: #FFFFFF;" @click="all()">
				<span style="margin-left: 33%;">全部类型</span>
				<p style="margin-left: 40%;color: red;">></p>
			</el-menu-item>
		      <el-menu-item
		        v-for="(item, index) in data.breed"
		        :key="index"
		        :index="index.toString()"
		        @mouseenter="menuItem(index)"
				style="color: #FFFFFF;">
				<span style="margin-left: 33%;">{{ item.breedname }}</span>
				<p style="margin-left: 40%;color: red;">></p>
		      </el-menu-item>
		    </el-menu>
		    <!-- 右侧内容区 -->
		    <div
		      class="right-content"
		      :style="{ display: isMenuHovered? 'block' : 'none' }"
		      @mouseenter="mouseEnter()"
		      @mouseleave="mouseLeave()"
		    >
		      <div
		        v-for="(item, index) in data.breed"
		        :key="index"
		        :style="{ display: activeIndex === index.toString()? 'block' : 'none' }"
				style="color: #E1337F;"
		      >
		        <span>{{ item.breedname }}</span>
		  		  <div v-for="(type, subIndex) in item.types" :key="subIndex" >

				<el-button style="width: 100%;justify-content: flex-start;border: 0px;color: #E1337F;" size="large" @click="gocom(type.typeid)">
						{{ type.typename }}
						<span style="margin-left: 90%;color: #F4768D;">></span>
						</el-button>
						
					</div>
		      </div>
		    </div>
		  </div>
	  </el-aside>
      <el-main >
		  <div style="width: 100%;height: 6.25rem;">
			  <div  style="" v-for="item in data.coms">
				  <el-button style="width: 100%;height: 150%;color: #000000;justify-content: flex-start;border: 0px;" size="large" @click="detail(item.comid)">
				   								  <el-avatar shape="square" :size="50" style="height: 10rem;width: 10rem;border: 1px;">
				   								    <el-image :src="$ip+`/public/shows/`+item.pic" />
				   								  </el-avatar>
				   								  &emsp;		 
				   								  &emsp;
				  								<div style="flex-direction: column; width: 100%;text-align: left;">
				  									<div><span>{{item.comname}}</span></div>
				  									&emsp;
				  									<div>
				  										<span>{{item.user.uname}}</span>
				  										<span style="margin-left: 10%;">{{item.makers}}</span>
				  									</div>
														<div style="width: 50rem;">
														<div style="color: #f56c6c; font-size: 1.25rem;text-align: right">
																<span>¥{{item.price}}</span>
														</div>
				  									</div>
				  									<div>
				  										<span>{{item.info}}{{item.comname}}</span>
				  									</div>
				  									
				  								</div>
				  								
				  </el-button>  
			  </div>
		  </div>
		  </el-main>
      <el-aside width="10%" ></el-aside>
    </el-container>
	  <div style="margin-left: 33%;">
				 <el-pagination  :total="data.page.count" :page-count="myCeil(data.page.count/data.page.lines)"
				 layout="jumper , prev, pager ,next ,total" @current-change="pageQuery" /> 
			  </div>

</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../router/index.js"
		import store from "../../store/index.js"
		import {Search,ShoppingCart} from '@element-plus/icons-vue'
		import bottom from "../../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../../store/alert.js'
		const route = useRoute()
		// 当前激活的索引
		const activeIndex = ref(null);
		// 菜单是否被悬停
		const isMenuHovered = ref(false);
		// 内容区域是否被悬停
		const isContentHovered = ref(false);
		const data=reactive({
			search:'',
			breed:[
				{types:[]}
			],
			coms:[],
			typeid:undefined,
			page:{
				pagenum:0,
				lines:5,
				count:0
			},
			select:undefined
		})
		
		
		// 处理鼠标进入菜单区域
		function menuMouse(){
			isMenuHovered.value = true;
						isContentHovered.value = true;
		}
		// 处理鼠标离开菜单区域
		function menu(){
			if (!isContentHovered.value) {
			  isMenuHovered.value = false;
			  activeIndex.value = null;
			}
		}
		// 处理鼠标进入菜单项
		function menuItem(index){
			activeIndex.value = index.toString();
		}
		// 处理鼠标进入内容区域
		function mouseEnter(){
			isContentHovered.value = true;
		}
		// 处理鼠标离开内容区域
		function mouseLeave(){
			isContentHovered.value = false;
			isMenuHovered.value = false;
			if (!isMenuHovered.value) {
			  isMenuHovered.value = false;
			  activeIndex.value = null;
			}
		}
		
		function gocom(typeid){
		// 查询每个类型的商品
			data.typeid=typeid
			$get("/public/findSearchtTid/"+data.page.pagenum+"/"+data.page.lines+"/"+typeid).then(function(resd){
				console.log(resd.data)
				data.breed=resd.data.data.breed
				data.coms=resd.data.data.com
				data.page.count=resd.data.data.count
			})
			
		}
		function detail(comid){
			router.push({
				path: '/home/detail',
				query: {
					comid: comid
				}
			})
		}
		const myCeil = computed(() => {
				return function(a) {
					var s= Math.ceil(a)
					return s
				}
			})
			
			function pageQuery(val=1){
				// 翻页跳转
				
				let pagenum=data.page.lines*val-data.page.lines
			
					if(data.typeid!=undefined){
						
						$get("/public/findSearchtTid/"+pagenum+"/"+data.page.lines+"/"+data.typeid).then(function(resd){
							console.log(resd.data)
							data.breed=resd.data.data.breed
							data.coms=resd.data.data.com
							data.page.count=resd.data.data.count
						})
					}else{
						$get("/public/findSearch/"+pagenum+"/"+data.page.lines).then(function(resd){
							console.log(resd.data)
							data.breed=resd.data.data.breed
							data.coms=resd.data.data.com
							data.page.count=resd.data.data.count
						})
					}
				}
			

		function all(){
			// 查找全部类型的商品
			data.typeid=undefined
			$get("/public/findSearch/"+data.page.pagenum+"/"+data.page.lines).then(function(resd){
				console.log(resd.data)
				data.breed=resd.data.data.breed
				data.coms=resd.data.data.com
				data.page.count=resd.data.data.count
			})
		}
		onMounted(()=>{
			let s=route.query.search
			let aa=route.query.sea
			if(aa!=undefined){
				let f=new FormData()
				f.append("s",aa)
				data.select=aa
				$postf("/public/select",f).then((read)=>{
					data.coms=read.data.data.com
					data.breed=read.data.data.breed
				})
			}else{
			if(s!=undefined){
			data.typeid=s
				$get("/public/findSearchtTid/"+data.page.pagenum+"/"+data.page.lines+"/"+s).then(function(resd){
					console.log(resd.data)
					data.breed=resd.data.data.breed
					data.coms=resd.data.data.com
					data.page.count=resd.data.data.count
				})
			}else{
				$get("/public/findSearch/"+data.page.pagenum+"/"+data.page.lines).then(function(resd){
					console.log(resd.data)
					data.breed=resd.data.data.breed
					data.coms=resd.data.data.com
					data.page.count=resd.data.data.count
				})
			}	
			}
			
			
			
			
		})
	
</script>

<style scoped>
.nav-container {
  display: flex;
  width: 100%;
  position: relative;
}

.left-nav {
  width: 55%;
  background-color: #E1337F;
}

.right-content {
  position: absolute;
  left: 55%;
  top: 0;
  width: 40%;
  height: 95.5%;
  padding: 10px;
  background-color: white;
  border: 0px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>    
